<template>
  <el-dialog title="添加客户" :visible="showDialog" @close="btnCancel">
    <el-form ref="property" label-width="120px" label-position="top" :model="property" :rules="rules">
      <el-form-item label="经纪" prop="agent">
        <el-select v-model="property.agent" placeholder="选择您的经纪人">
          <el-option v-for="item in agents" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="property.category" placeholder="选择您的房产分类">
          <el-option v-for="item in categories" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="property.title" />
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          v-for="tag in property.tags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-cascader
          v-model="value"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          placeholder="请选择您的地址"
          @change="handleChange"
        />
        <el-input v-model="property.address" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="property.price" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="property.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <VueEditor ref="vueEditor" v-model="property.content" />
      </el-form-item>
      <el-form-item label="介绍图片" prop="images">
        <images-upload ref="houseimages" />
      </el-form-item>
      <el-form-item label="封面" prop="image">
        <imageUpload ref="houseimage" />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="addproperty">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<script>
import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
import imageUpload from '@/components/ImageUpload'
import imagesUpload from './imagesupload.vue'
import { getAgents } from '@/api/client'
import { addProperty, getproperty, editProperty } from '@/api/house'
import { getcategories } from '@/api/categories'
import { getmap } from '@/api/map'
export default {
  components: {
    VueEditor,
    imageUpload,
    imagesUpload
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: [],
      options: [],
      userid: '',
      inputVisible: false,
      inputValue: '',
      agents: [],
      categories: [],
      property: {
        title: '',
        desc: '',
        image: '',
        agent: '',
        content: '',
        address: '',
        price: '',
        photos: [],
        tags: [],
        category: ''
      },
      imageList: [],
      rules: {
        agent: [
          { required: true, message: '经纪人不能为空', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '房屋分类不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '封面不能为空', trigger: 'blur' }
        ]
      },
      map: {
        key: '557f70e1ca4b418b37e4b2862ebc8a09',
        subdistrict: '3',
        keywords: '中国'
      }
    }
  },
  created() {
    this.$nextTick(async() => {
      const res = await getAgents()
      this.agents = res.data
      const result = await getcategories()
      this.categories = result.data
      const mapdata = await getmap(this.map)
      this.options = this.mapoptions(mapdata.data.districts[0].districts)
      console.log(342, this.options)
    })
  },
  methods: {
    mapoptions(mapdata) {
      const obj = []
      mapdata.forEach(item => {
        const arr = {}
        arr.value = item.name
        arr.label = item.name
        if (item.districts.length) {
          arr.children = this.mapoptions(item.districts)
        }
        obj.push(arr)
      })
      return obj
    },
    handleChange(value) {
      console.log(value)
      let address = ''
      value.forEach(item => {
        address += item
      })
      // console.log(address)
      this.property.address = address
      this.value = []
    },
    async addproperty() {
      if (this.$refs.houseimage.fileList.length) {
        this.property.image = this.$refs.houseimage.fileList[0].url
      }
      this.property.photos.length = 0
      if (this.$refs.houseimages.fileList.length) {
        this.$refs.houseimages.fileList.forEach((item) => {
          this.property.photos.push(item.url)
          // console.log(141, this.property.photos)
        })
      }
      await this.$refs.property.validate()
      if (this.userid) {
        await editProperty(this.userid, this.property)
        this.$message.success('修改成功')
      } else {
        await addProperty(this.property)
        this.$message.success('新增成功')
      }
      this.btnCancel()
      this.$emit('addfangchan')
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url
      // this.dialogVisible = true
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.property.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleClose(tag) {
      this.property.tags.splice(this.property.tags.indexOf(tag), 1)
    },
    btnCancel() {
      this.property.title = ''
      this.property.desc = ''
      this.property.image = ''
      this.property.agent = ''
      this.property.content = ''
      this.property.address = ''
      this.property.price = ''
      this.property.photos = []
      this.property.tags = []
      this.property.category = ''
      this.$refs.houseimage.fileList = []
      this.$refs.houseimages.fileList.length = 0
      this.$refs.houseimages.clearUpload()
      this.$emit('update:showDialog', false)
    },
    async getproperty(id) {
      this.userid = id
      const res = await getproperty(id)
      console.log(182, id, res)
      this.property.title = res.data.title
      this.property.tags = res.data.tags
      this.property.address = res.data.address
      this.property.price = res.data.price
      if (res.data.agent) {
        this.property.agent = res.data.agent.id
      }

      if (res.data.category) {
        this.property.category = res.data.category.id
      }

      this.property.desc = res.data.desc
      this.property.content = res.data.content
      this.property.image = res.data.image
      if (res.data.photos.length) {
        this.property.photos = res.data.photos
      }
      if (this.property.photos.length) {
        this.property.photos.forEach(item => {
          this.imageList.push({ url: item, upload: true })
        })
      }

      this.$refs.houseimages.fileList = this.imageList
      this.$refs.houseimage.fileList = [
        { url: this.property.image, upload: true }
      ]
    }
  }
}
</script>

<style>
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  @import "~vue2-editor/dist/vue2-editor.css";
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
.departmentTree {
  width: 90%;
  border: 1px solid #888;
  position: absolute;
  height: 200px;
  z-index: 9;
  overflow: auto;
}
</style>
